<template>
    <div>
        <div class="header">
            <div class="icons">
                <router-link to="/mine/info"><van-icon name="setting-o" size="20px"></van-icon><span style="display: inline-block; height: 25px; line-height: 1; vertical-align: middle; padding: 0 10px; color:#fff;">设置</span></router-link>
                
                <!-- <router-link to="/notice/list"><van-icon name="comment-o" size="24px"></van-icon></router-link> -->
            </div>
            <div class="avatar" @click="$router.push('/mine/edit')">
                <img :src="$store.state.userInfo.iconPath || defaultImg" />
            </div>
            <div class="userInfo">
                <p class="name">{{$store.state.userInfo.mobile}}</p>
                <p class="level" v-if="isLogin">营销代码：{{marketCode}} <button ref="copy" class="copyButton" :data-clipboard-text="marketCode" @click="copy" id="copy_text">复制</button></p>
                <p class="level" v-else @click="$router.push('/login')">登录 / 注册</p>
            </div>
        </div>
        <img src="../../static/img/userHeadImg.jpg" style="width:100%;"/>

        <div style="padding:15px; position: relative; top: -55px;">
            <van-cell-group>
                <van-cell title="我的订单" value="全部订单" is-link to="/order/list?type=0&showItemIndex=0" />
                <div class="orderType">
                    <div class="orderItem" @click="$router.push('/order/list?type=1&showItemIndex=1')">
                        <span class="iconfont icon-daifukuan"></span>
                        <!-- <p>待付款<span class="info">5</span></p> -->
                        <p>待付款</p>
                        <span class="showOrderNum" v-if="needPayCount != 0">{{needPayCount}}</span>
                    </div>
                    <!-- <div class="orderItem" @click="$router.push('/order/list?type=2')">
                        <span class="iconfont icon-daifahuo"></span>
                        <p>待发货</p>
                    </div> -->
                    <div class="orderItem" @click="$router.push('/order/list?type=3&showItemIndex=2')">
                        <span class="iconfont icon-daishouhuo"></span>
                        <p>待收货</p>
                        <span class="showOrderNum" v-if="needReceiveCount != 0">{{needReceiveCount}}</span>
                    </div>
                    <div class="orderItem" @click="$router.push('/order/list?type=4&showItemIndex=3')">
                        <span class="iconfont icon-daipingjia"></span>
                        <p>待评价</p>
                        <span class="showOrderNum" v-if="needCommentCount != 0">{{needCommentCount}}</span>
                    </div>
                    <div class="orderItem" @click="$router.push('/order/refundList')">
                        <span class="iconfont icon-tuihuanxiu"></span>
                        <p>换修/售后</p>
                        <span class="showOrderNum" v-if="refundCount !=0 ">{{refundCount}}</span>
                    </div>
                </div>
            </van-cell-group>

            <van-cell-group>
                <!-- <van-cell title="我的资产" value="查看全部资产" is-link to="/capital/index" /> -->
                <!-- <div class="asset">
                    <div class="assetItem" v-for="item in accountList" v-bind:key="item.accountId">
                        <span class="number">{{item.accountBalance | money}}</span>
                        <p class="name">{{item.typeName}}</p>
                    </div>
                </div> -->
                <div class="orderType">
                    <div class="orderItem" @click="$router.push('/shopActivity/discountCard')">
                        <span class="iconfont icon-youhuiquan"></span>
                        <p>优惠券</p>
                    </div>
                    <!-- <div class="orderItem" @click="$router.push('/order/list?type=2')">
                        <span class="iconfont icon-daifahuo"></span>
                        <p>待发货</p>
                    </div> -->
                    <div class="orderItem" @click="$router.push('/capital/detail?id=62')">
                        <span class="iconfont icon-jifen"></span>
                        <p>积分</p>
                    </div>
                    <div class="orderItem" @click="$router.push('/capital/detail?id=63')">
                        <span class="iconfont icon-yue"></span>
                        <p>余额</p>
                    </div>
                    <div class="orderItem" @click="$router.push('/capital/index')">
                        <span class="iconfont icon-wodeqianbao"></span>
                        <p>我的钱包</p>
                    </div>
                </div>
            </van-cell-group>



            <van-cell-group>
                <!-- <van-cell title="会员中心"  is-link /> -->
                <van-cell title="销售记录"  is-link to="/sale/list?type=1&showItemIndex=0"/>
                <van-cell title="收货地址"  is-link to="/address/list"/>
                <van-cell title="我的收藏"  is-link to="/goods/collection"/>                
                <!-- <van-cell title="客服地址"  is-link /> -->
            </van-cell-group>
        </div>
        
    </div>
</template>

<script>
import defaultImg from './../../assets/avata.png';
import Clipboard from 'clipboard';
export default {
    name: 'mine',
    data() {
        return {
            defaultImg,
            accountList: [],
            showOrderNum1: 0,
            showOrderNum2: 0,
            showOrderNum3: 0,
            showOrderRefundNum: 0,
            needPayCount:0,
            needSendCount:0,
            needReceiveCount:0,
            needCommentCount:0,
            refundCount:0,
            isLogin: false,
            marketCode: '' // 营销代码
        }
    },

    methods: {
        // 点击复制营销代码
        copy: function () {
            var clipboard = new Clipboard('#copy_text');
            clipboard.on('success', () => {
                this.$toast.success('复制成功！');
                // 释放内存
                clipboard.destroy()
            })
            clipboard.on('error', () => {
                // 不支持复制
                // 释放内存
                clipboard.destroy()
            })
        },

        getUserAccountList() {
            this.$http.post('/user/userAccount/front/getUserAccountList', {}).then(res => {
                if (res.status === 0) {
                    let accountList = res.data;
                    console.log(accountList)
                    if (accountList.length > 3) {
                        accountList.length = 3;
                    }
                    this.accountList = accountList;
                } else {
                    this.$toast.fail(res.message);
                }
            })
        },

        getUserOrderList(searchType) {
            this.$http.post('/shop/order/front/getUserOrderList', {
                token: localStorage.getItem('token'),
                searchType: searchType,
                pageNum: 1,
                pageSize: 10
            }).then(res => {
                console.log(searchType)
                console.log(res.data)
                //查询类型（ 0：所有订单   1：待付款   2：待发货   3：待收货   4：待评论   5：已完成 ）
                var orderNum = res.data.total
                if (searchType == 1) {
                    this.showOrderNum1 = orderNum
                } else if (searchType == 3){
                    this.showOrderNum2 = orderNum
                } else if (searchType == 4) {
                    this.showOrderNum3 = orderNum
                }
            })
        },

        getOrderRefundList() {
            this.$http.post('/shop/orderRefund/front/getOrderRefundList', {
                token: localStorage.getItem('token'),
                pageNum: 1,
                pageSize: 10
            }).then(res => {
                console.log('售后订单')
                console.log(res.data)
                //查询类型（ 0：所有订单   1：待付款   2：待发货   3：待收货   4：待评论   5：已完成 ）
                var orderNum = res.data.total
                this.showOrderRefundNum = orderNum
            })
        },

        getUserCenterData() {
            this.$http.post('/shop/userCenter/front/userCenterData', {
                token: localStorage.getItem('token')
            }).then(res => {
                console.log('个人中心数据')
                console.log(res.data)
                this.needPayCount = res.data.needPayCount // 待付款
                this.needSendCount = res.data.needSendCount // 待发货
                this.needReceiveCount = res.data.needReceiveCount // 待收货
                this.needCommentCount = res.data.needCommentCount // 待评价
                this.refundCount = res.data.refundCount // 换修售后
                this.marketCode = res.data.marketCode // 营销代码
                localStorage.setItem("userMarketCode", this.marketCode)
            })
        }
    },

    activated() {
        if (localStorage.getItem('token')) {
            this.isLogin = true
            this.getUserAccountList();
            this.getUserOrderList(1);
            this.getUserOrderList(3);
            this.getUserOrderList(4);
            this.getOrderRefundList();
            this.getUserCenterData();
        } else {
            console.log('未登录')
            this.isLogin = false
        }        
    }
}
</script>

<style lang="scss" scoped>
@import './../../assets/default.scss';
@font-face {
    font-family: 'iconfont';  /* project id 1531852 */
    src: url('//at.alicdn.com/t/font_1531852_xh8cqdih4ob.eot');
    src: url('//at.alicdn.com/t/font_1531852_xh8cqdih4ob.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_1531852_xh8cqdih4ob.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_1531852_xh8cqdih4ob.woff') format('woff'),
    url('//at.alicdn.com/t/font_1531852_xh8cqdih4ob.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_1531852_xh8cqdih4ob.svg#iconfont') format('svg');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-daifukuan:before {
  content: "\e601";
}
.icon-daishouhuo:before {
  content: "\e659";
}
.icon-daipingjia:before {
  content: "\e653";
}
.icon-tuihuanxiu:before {
  content: "\e677";
}
.icon-youhuiquan:before {
  content: "\e646";
}
.icon-jifen:before {
  content: "\e9a6";
}
.icon-yue:before {
  content: "\e647";
}
.icon-wodeqianbao:before {
  content: "\e65a";
}
/deep/ .van-cell-group {
    margin-bottom: 15px;
    border-radius: 10px;
}
/deep/ .van-cell{border-radius: 10px; color: #333;}

.header {
    background-color:#ff8838;
    color: #fff;
    display: flex;
    height: 100px;
    align-items: center;
    position: relative;
    .icons {
        position: absolute;
        right: 5px;
        top: 15px;
        /deep/ .van-icon {
            // margin-right: 15px;
            color: #fff;
        }
    }
    .avatar {
        height: 50px;
        width: 50px;
        overflow: hidden;
        border-radius: 50%;
        margin-left: 20px;
        margin-right: 15px;
        img {
            height: 50px;
            width: 50px;
            border-radius: 50%;
            border: 2px solid #fff;
        }
    }

    .userInfo {
        .name {
            font-size: 16px;
            line-height: 26px;
        }
    }

}
.orderType {
    display: flex;
    .orderItem {
        flex: 1;
        text-align: center;
        padding: 15px 0px;
        position: relative;
        span {
            font-size: 20px;
            color: #666;
        }

        p {
            margin-top: 3px;
            font-size: 12px;
        }
        span.showOrderNum{
            display: block;
            border-radius: 50%;
            background: #ff6700;
            color: #fff;
            font-size: 12px;
            position: absolute;
            top: 5px;
            right: 10px;
            width: 15px;
            height: 15px;
            line-height: 15px;
            text-align: center;
        }
    }
}

.asset {
    display: flex;
    .assetItem {
        flex: 1;
        text-align: center;
        padding: 15px 0px;
        span {
            font-size: 16px;
            color: $defaultColor;
        }

        p {
            margin-top: 3px;
            font-size: 12px;
        }
    }
}

/deep/ .van-hairline--top-bottom::after{
    border-width:0;
}
.copyButton{
    background: #fff;
    color: #999;
    border: none;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 6px;
    margin-left: 5px;
}
</style>
